<template>
	<view class="recorder"  >
		<!-- 	<view class="record-title flex-column">
			<view>-- 参考音频 --</view>
			<text>点击下方按钮,开始录音</text>
		</view> -->
		<text class="now-date">{{ reDate }}</text>
		<view class="v-tips">
			<block v-if="finish == 1">
				点击开始录制语音,建议录制<span>15~{{maximum}}秒</span>内
			</block>
			<block v-if="finish == 5">
				点击完成录音,建议录制<span>15~{{maximum}}秒</span>内
			</block>
			<block v-if="finish == 2 || finish == 4">
				点击播放录音,点击完成保存录音
			</block>
			<block v-if="finish == 3">
				点击暂停播放录音,点击完成保存录音
			</block>
		</view>
		<!-- <view class="recorder-box display-a" v-if="finish == 1" @click="handle" @longpress="onStartRecoder"
			@touchend="onEndRecoder"> -->
		<view class="recorder-box display-a" v-if="finish == 1 || finish == 5">
			<!-- 	<view class="display-a-jc s-frame margin-right_30rpx">
				<image class="img-108" :src="digitalPeop109"></image>
				<view class="color_959595">取消</view>
			</view> -->
			<view @click="handle()">
				<u-circle-progress :bgColor="bgColor" :colorType="colorType" :activeColor="theme" :duration="0"
					:percent="calcProgress">
					<view class="u-progress-content">
						<image :src="group3476Three" class="img-v"></image>
					</view>
				</u-circle-progress>
			</view>
			<!-- <view class="display-a-jc s-frame margin-left_30rpx">
				<image class="img-108" :src=" digitalPeop107"></image>
				<view class="color_959595">完成</view>
			</view> -->
		</view>

		<view class="recorder-box display-a" v-else>
			<!-- <view class="display-a-jc s-frame margin-right_30rpx" @click="cancel">
				<image class="img-108" :src="digitalPeop108"></image>
				<view class="color_FFFFFF font-size_24rpx">取消</view>
			</view> -->

			<view class="flex-column " style="margin-right: 50rpx;" @click="cancel">
				<image class="img-38" :src="group3472Five" mode=""></image>
				<view class=" font-size_22rpx">
					刷新
				</view>

			</view>
			<view @click="playVoice">
				<u-circle-progress :bgColor="bgColor" :colorType="colorType" :inactiveColor="inactiveColor"
					:activeColor="theme" :duration="0" :percent="playProgress">
					<view class="u-progress-content">
						<image :src="finish == 3 ?group3479Three  : group3480Three " class="img-v"></image>
					</view>
				</u-circle-progress>
			</view>
			<!-- <view class="display-a-jc s-frame margin-left_30rpx" @click="confirm">
				<image class="img-108" :src="digitalPeop111"></image>
				<view class="color_FFFFFF font-size_24rpx">完成</view>
			</view> -->
			
			<view class="flex-column " style="margin-left: 50rpx;" @click="confirm">
				<image class="img-38" :src="group3471Five" mode=""></image>
				<view class=" font-size_22rpx">
					完成
				</view>
			
			</view>
		</view>


	</view>
</template>

<script>
	import uCircleProgress from '../u-circle-progress/u-circle-progress.vue'
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		components: {
			uCircleProgress
		},
		props: {
			width: {
				type: String,
				default: '160rpx'
			},
			height: {
				type: String,
				default: '160rpx'
			},
			showTop: {
				type: Boolean,
				default: true
			},
			maximum: {
				type: [Number, String],
				default: 60
			},
			duration: {
				type: Number,
				default: 20
			},
			colorType: {
				type: String,
				default: '1'
			},
			backgroundColor: {
				type: String,
				default: 'transparent'
			},
			inactiveColor: {
				type: String,
				default: '#fff'
			},
			bgColor: {
				type: String,
				default: 'transparent'
			},
			theme: {
				type: String,
				default: '#525252'
			},
			confirmText: {
				type: String,
				default: '完成'
			}
		},
		data() {
			return {
				// voice:this.$imgs.voiceAudio,
				// play:this.$imgs.playAudio,
				// pause:this.$imgs.pauseAudio,
				group3471Five: this.$imgs.group3471Five,
				group3472Five: this.$imgs.group3472Five,
				
				

				group2421Nine: this.$imgs.group2421Nine,
				digitalPeopPause2Audio: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/pause2Audio.png',
				digitalPeopPauseAudio: this.$imgs.group3388Nine,

				group3476Three: this.$imgs.group3476Three,
				group3479Three: this.$imgs.group3479Three,
				group3480Three: this.$imgs.group3480Three,
			

				digitalPeopPlay2Audio: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/play2Audio.png',
				digitalPeopplayAudio: this.$imgs.group3371Nine,
				digitalPeopVoice3Audio: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/voice3Audio.png',
				digitalPeopVoiceAudio: this.$imgs.group3370Nine,
				digitalPeop107: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/107.png',
				digitalPeop108: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/108.png',
				digitalPeop111: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/111.png',
				digitalPeop109: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/109.png',
				
				group3473Five:this.$imgs.group3473Five,



				reDate: '00:00',
				sec: 0,
				min: 0,

				finish: 1, //1未录制 5开始录制 2录制结束 3开始播放 4暂停

				voicePath: '',

				playProgress: 100,
				timer: null,

				imgUrl: this.$imgUrl,
			};
		},
		created() {

			// 监听
			this.onMonitorEvents()
		},
		computed: {
			// 录制时间计算
			calcProgress() {
				return (this.sec + (this.min * 60)) / this.maximum * 100
			}
		},
		methods: {



			// 完成事件
			confirm() {
				if (!innerAudioContext.paused) {
					innerAudioContext.stop();
					this.finish = 4;
				}
				// console.log("路径====>", this.voicePath);
				this.$emit('confirm', this.voicePath);
				this.reset();
			},

			// 取消事件
			cancel() {
				if (!innerAudioContext.paused) {
					innerAudioContext.stop();
					this.finish = 4;
				}
				this.$emit('cancel')
				this.reset();
			},

			// 点击事件
			async handle() {

				this.$emit('click')

				if (this.finish == 1) {
					let res = await this.audioAuthorize()
					console.log("----->", res);
					if (res) {
						console.log((res))
						this.onStartRecoder()
					}
				} else {
					this.onEndRecoder()
				}

			},
			// 重新录制
			reset() {
				this.voicePath = ''
				this.min = 0
				this.sec = 0
				this.reDate = '00:00'
				this.playProgress = 100
				this.finish = 1;
				this.$emit('reset')
			},

			// 播放暂停录音
			playVoice() {
				innerAudioContext.src = this.voicePath;
				if (this.finish == 2 || this.finish == 4) {
					innerAudioContext.play();
					this.finish = 3;
					// console.log("开始播放---->11111",this.finish);
				} else {
					innerAudioContext.pause();
					this.finish = 4;
					// console.log("暂停播放---->11111",this.finish);
				}
				this.$forceUpdate();
				this.$emit('playVoice', innerAudioContext.paused);
			},

			// 录制结束
			onEndRecoder() {
				recorderManager.stop();
				this.finish = 2;
				// console.log("结束录制", this.finish);
			},

			// 开始录制
			onStartRecoder() {




				recorderManager.start({
					format: 'mp3',
					duration: this.maximum * 1000,
					sampleRate: 44100,
					encodeBitRate: 128000
				})
				this.finish = 5;
				// console.log("开始录制", this.finish);

			},

			// 监听
			onMonitorEvents() {
				// 录制开始
				recorderManager.onStart(() => {
					// console.log("开始录制--->", this.finish);
					// uni.showLoading({
					// 	title: '录制中...'
					// })
					this.startDate()
					this.$emit('start')
				})
				// 录制结束
				recorderManager.onStop(({
					tempFilePath
				}) => {
					this.voicePath = tempFilePath
					clearInterval(this.timer)
					// uni.hideLoading()
					this.$emit('end')
					// console.log("--->录制结束", this.voicePath,this.finish);
				})
				// 播放进度
				innerAudioContext.onTimeUpdate(() => {

					// console.log("播放进度");

					let totalDate = innerAudioContext.duration
					let nowTime = innerAudioContext.currentTime
					let surplus = totalDate - nowTime
					this.playProgress = surplus / totalDate * 100

					let _min = Math.floor(surplus / 60)
					if (_min < 10) _min = '0' + _min;
					let _sec = Math.floor(surplus % 60)
					if (_sec < 10) _sec = '0' + _sec;
					this.reDate = _min + ':' + _sec
				})
				// 播放暂停
				innerAudioContext.onPause(() => {
					this.resetDate()
					this.playProgress = 100
					this.$emit('stop')
					// console.log("---1111>暂停播放",this.finish);
				})
				// 播放停止
				innerAudioContext.onStop(() => {
					this.resetDate()
					this.playProgress = 100
					this.finish = 4;
					// console.log("---1111>播放停止",this.finish);
					this.$emit('stop')
				})
				//音频自然播放结束
				innerAudioContext.onEnded(() => {
					this.resetDate()
					this.playProgress = 100
					this.finish = 4;
					// console.log("---1111>播放结束",this.finish);
					this.$emit('ended')
				})
			},
			// 录音计时
			startDate() {
				clearInterval(this.timer)
				this.sec = 0
				this.min = 0
				this.timer = setInterval(() => {
					this.sec += this.duration / 1000
					if (this.sec >= 60) {
						this.min++
						this.sec = 0
					}
					this.resetDate()
				}, this.duration)
			},
			// 播放时间
			resetDate() {
				let _s = this.sec < 10 ? '0' + parseInt(this.sec) : parseInt(this.sec)
				let _m = this.min < 10 ? '0' + this.min : this.min
				this.reDate = _m + ':' + _s
			},


			async audioAuthorize() {
				const self = this
				let res = await this.getSetting()
				let auth = res.authSetting['scope.record']
				console.log(auth)
				// 拒绝授权
				if (auth === false) {
					uni.showModal({
						content: '您已拒绝录音授权，是否手动开启权限？',
						async success(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								await self.openSetting()
							} else if (res.cancel) {
								// console.log('用户点击取消');
								uni.navigateBack()
							}
						}
					})
					return false
				}
				// 或者未进行过授权
				if (!auth) {
					let res = await this.getAuthorize('scope.record')
					return res.errMsg === 'authorize:ok'
				}
				return true
			},
			// 获取授权设置
			getSetting() {
				return new Promise((resolve, reject) => {
					console.log(reject)
					uni.getSetting({
						success(res) {
							// console.log(`获取用户授权结果成功`, res);
							resolve(res)
						}
					})
				})
			},
			// 调起客户端小程序设置界面
			openSetting() {
				return new Promise((resolve, reject) => {
					uni.openSetting({
						success(res) {
							// console.log(`调起客户端小程序设置界面成功`, res);
							resolve(res)
						},
						fail(e) {
							// console.log(`调起客户端小程序设置界面失败`, e);
							resolve(e)
						}
					})
				})
			},
			// 获取授权
			getAuthorize(scope) {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: scope,
						success(res) {
							// console.log(`获取${scope}权限成功`, res);
							resolve(res)
						},
						fail(e) {
							// console.log(`获取${scope}权限失败`, e);
							resolve(e)
						}
					})
				})
			},
		}
	}
</script>

<style lang="less">
	.recorder {
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		
		background-image: url('https://cuzi.weijuyunke.com/index/five/%E7%BB%84%E5%90%88%203473.png');
		// background-repeat: no-repeat;
		background-size: contain;
		
		
		font-size: 24rpx;
		width: 100%;
		z-index: 9;
		padding: 20rpx 0;
		border-radius: 20rpx;
	
		.record-title {
			view {
				font-size: 34rpx;
				font-weight: 600;
				color: rgba(116, 100, 255, 1);
				margin: 30rpx 0 8rpx;
			}
	
			text {
				color: #999;
				font-size: 28rpx;
				padding-bottom: 20rpx;
			}
		}
	
		.re-top {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 20rpx;
			width: 100%;
			font-size: 28rpx;
			box-sizing: border-box;
		}
	
		.title {
			font-size: 36rpx;
			color: #333;
			padding: 20rpx 0 30rpx;
		}
	
		.recorder-box {
			position: relative;
		}
	
		.now-date {
			// text-align: center;
			color: rgba(116, 100, 255, 1);
			font-size: 38rpx;
			font-weight: bold;
			margin-bottom: 24rpx;
		}
	}
	
	
	
	
	// 按钮样式
    
	
	
	.v-pop-cls {
		padding: 62rpx 24rpx 30rpx;
		background-color: #fff;
		width: 100%;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		.c-but {
			border-radius: 20rpx;
			margin: 20rpx;
			text-align: center;
			font-size: 32rpx;
			height: 100rpx;
			margin-top: 30rpx;
			color: #ffffff;
			background: linear-gradient(90deg, rgb(188, 120, 248), rgb(135, 80, 242) 100%);
		}

		.video-title-cls {
			background: linear-gradient(102.95deg, rgb(29, 130, 255), rgb(226, 79, 250));
			-webkit-background-clip:
				text;
			-webkit-text-fill-color:
				transparent;
			background-clip:
				text;
			text-fill-color:
				transparent;
			font-size: 40rpx;
			font-weight: 600;
			letter-spacing: 0%;
		}

		.detail-cls {
			color: rgb(51, 51, 51);
			font-size: 32rpx;
			font-weight: 600;
			margin: 30rpx 0;
		}

		image {
			width: 100%;
		}

		.hint-cls {
			margin-top: 20rpx;

			view {
				width: 16rpx;
				height: 16rpx;
				background: rgba(116, 100, 255, 1);
				border-radius: 50%;
				margin-right: 10rpx;
			}

			text {
				color: rgb(153, 153, 153);
				font-size: 26rpx;
			}
		}
	}

	.s-frame {
		width: 130rpx;
		padding: 10rpx 0;
		border-radius: 100rpx;
		background-color: #636363;
	}

	.color_959595 {
		font-size: 24rpx;
		color: #959595;
	}

	.img-108 {
		width: 28rpx;
		height: 28rpx;
		margin-right: 4rpx;
		margin-top: 2rpx;
	}

	.img-38 {
		width: 38px;
		height: 38px;
		margin-right: 4rpx;
		margin-top: 2rpx;
	}

	.v-tips {
		font-size: 26rpx;
		margin-bottom: 30rpx;
		color: block;

		span {
			color: rgba(116, 100, 255, 1);
			margin: 0 4rpx;
		}
	}

	.u-progress-content {
		border-radius: 100rpx;
		background: linear-gradient(82.59deg, rgba(100, 117, 255, 1), rgba(116, 100, 255, 1) 100%);
	}

	.img-v {
		width: 160rpx;
		height: 160rpx;
	}

	
</style>